<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4080479" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">chat-dot-round</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">connection</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">document-copy</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">basketball</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">box</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">caret-left</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">dish-1</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">chat-dot-square</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">close-notification</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">cold-drink</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">data-board</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">coin</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">circle-plus</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">chat-square</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">delete-solid</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">add-location</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">collection</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">chat-line-round</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">caret-right</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">delete-location</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">copy-document</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">document-remove</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">d-arrow-left</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">edit-outline</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">document-checked</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">discover</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">document-add</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">files</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">finished</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">d-arrow-right</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">folder-add</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">data-analysis</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">full-screen</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">folder-delete</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">goblet-full</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">folder-remove</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">goblet-square</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">date</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">goblet</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">football</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">fork-spoon</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">house</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">goods</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">food</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">guide</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">document</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">coordinate</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
                <div class="name">folder-checked</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">cloudy</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">eleme</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">ice-cream-round</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">hot-water</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">female</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">male</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">light-rain</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">ice-cream</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">location-information</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
                <div class="name">lollipop</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">document-delete</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">heavy-rain</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">film</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">knife-fork</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">goblet-square-full</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">grape</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">key</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">ice-drink</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">medal-1</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">milk-tea</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">microphone</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">dish</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">circle-close</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">more-outline</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">news</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">notebook-1</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">mobile</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">moon</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">odometer</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">first-aid-kit</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">minus</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">message-solid</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">headset</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">money</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">map-location</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">paperclip</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">folder-opened</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ec;</span>
                <div class="name">pie-chart</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">no-smoking</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">office-building</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">postcard</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">position</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">Ice-cream-square</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">price-tag</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">dessert</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">picture-outline-round</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">partly-cloudy</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">reading</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">location-outline</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">open</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">phone-outline</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">picture-outline</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">place</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">ice-tea</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">printer</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">s-cooperation</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">s-flag</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">lightning</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">magic-stick</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">moon-night</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">s-check</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">refrigerator</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">pear</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">s-home</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">mobile-phone</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">s-open</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">potato-strips</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">s-help</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">monitor</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">s-custom</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">s-goods</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">rank</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">refresh-left</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">remove-outline</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">s-platform</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">mic</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">s-management</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">platform-eleme</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">s-fold</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">notebook-2</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">medal</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">s-data</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">s-promotion</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">s-grid</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">receiving</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">s-ticket</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">s-opportunity</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">refresh-right</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">s-unfold</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">orange</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">s-tools</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">question</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">mouse</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">s-shop</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">s-operation</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">scissors</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">s-marketing</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72c;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">shopping-bag-1</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">sell</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">set-up</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">shopping-cart-1</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe733;</span>
                <div class="name">s-claim</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe734;</span>
                <div class="name">school</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe735;</span>
                <div class="name">ship</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">smoking</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">shopping-cart-2</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">shopping-cart-full</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">sort-down</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">remove</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">soccer</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73f;</span>
                <div class="name">star-on</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">present</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">s-release</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">star-off</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">suitcase</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">s-comment</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">stopwatch</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">switch-button</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">suitcase-1</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe748;</span>
                <div class="name">sunny</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe749;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">s-order</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">sunrise</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">shopping-bag-2</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">s-finance</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">tickets</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe750;</span>
                <div class="name">tableware</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">toilet-paper</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">trophy-1</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe753;</span>
                <div class="name">top</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe754;</span>
                <div class="name">truck</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe755;</span>
                <div class="name">timer</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe756;</span>
                <div class="name">sold-out</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe757;</span>
                <div class="name">top-right</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">upload2</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">thumb</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75c;</span>
                <div class="name">trophy</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75d;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">table-lamp</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">top-left</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe760;</span>
                <div class="name">service</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe761;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">aim</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">video-play</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">attract</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">turn-off-microphone</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">bottom-left</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe764;</span>
                <div class="name">umbrella</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">alarm-clock</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">sunset</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">apple</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe766;</span>
                <div class="name">warning-outline</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">zoom-in</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">camera-solid</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe768;</span>
                <div class="name">watch</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe769;</span>
                <div class="name">video-camera</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">sort-up</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">brush</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">baseball</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">video-pause</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">watermelon</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">bangzhu</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">sugar</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">caret-bottom</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">turn-off</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">caret-top</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">user-solid</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe771;</span>
                <div class="name">view</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">bank-card</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">video-camera-solid</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">chat-line-square</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">wind-power</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">bell</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">water-cup</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">bicycle</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">watch-1</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">cherry</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">zoom-out</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">coffee</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">takeaway-box</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">coffee-cup</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe778;</span>
                <div class="name">sunrise-1</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">circle-plus-outline</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">bottom-right</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">c-scale-to-original</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">collection-tag</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">circle-check</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">bottom</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">data-line</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">d-caret</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">cloudy-and-sunny</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">discount</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">cpu</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">crop</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">chat-round</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">chicken</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">burger</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1684743976242') format('woff2'),
       url('iconfont.woff?t=1684743976242') format('woff'),
       url('iconfont.ttf?t=1684743976242') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-chat-dot-round"></span>
            <div class="name">
              chat-dot-round
            </div>
            <div class="code-name">.icon-chat-dot-round
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-connection"></span>
            <div class="name">
              connection
            </div>
            <div class="code-name">.icon-connection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-document-copy"></span>
            <div class="name">
              document-copy
            </div>
            <div class="code-name">.icon-document-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-basketball"></span>
            <div class="name">
              basketball
            </div>
            <div class="code-name">.icon-basketball
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-box"></span>
            <div class="name">
              box
            </div>
            <div class="code-name">.icon-box
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-left"></span>
            <div class="name">
              caret-left
            </div>
            <div class="code-name">.icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dish-1"></span>
            <div class="name">
              dish-1
            </div>
            <div class="code-name">.icon-dish-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat-dot-square"></span>
            <div class="name">
              chat-dot-square
            </div>
            <div class="code-name">.icon-chat-dot-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close-notification"></span>
            <div class="name">
              close-notification
            </div>
            <div class="code-name">.icon-close-notification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cold-drink"></span>
            <div class="name">
              cold-drink
            </div>
            <div class="code-name">.icon-cold-drink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-data-board"></span>
            <div class="name">
              data-board
            </div>
            <div class="code-name">.icon-data-board
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-coin"></span>
            <div class="name">
              coin
            </div>
            <div class="code-name">.icon-coin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-circle-plus"></span>
            <div class="name">
              circle-plus
            </div>
            <div class="code-name">.icon-circle-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat-square"></span>
            <div class="name">
              chat-square
            </div>
            <div class="code-name">.icon-chat-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-solid"></span>
            <div class="name">
              delete-solid
            </div>
            <div class="code-name">.icon-delete-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-location"></span>
            <div class="name">
              add-location
            </div>
            <div class="code-name">.icon-add-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-collection"></span>
            <div class="name">
              collection
            </div>
            <div class="code-name">.icon-collection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat-line-round"></span>
            <div class="name">
              chat-line-round
            </div>
            <div class="code-name">.icon-chat-line-round
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-right"></span>
            <div class="name">
              caret-right
            </div>
            <div class="code-name">.icon-caret-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete-location"></span>
            <div class="name">
              delete-location
            </div>
            <div class="code-name">.icon-delete-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy-document"></span>
            <div class="name">
              copy-document
            </div>
            <div class="code-name">.icon-copy-document
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-document-remove"></span>
            <div class="name">
              document-remove
            </div>
            <div class="code-name">.icon-document-remove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-d-arrow-left"></span>
            <div class="name">
              d-arrow-left
            </div>
            <div class="code-name">.icon-d-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit-outline"></span>
            <div class="name">
              edit-outline
            </div>
            <div class="code-name">.icon-edit-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-document-checked"></span>
            <div class="name">
              document-checked
            </div>
            <div class="code-name">.icon-document-checked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-discover"></span>
            <div class="name">
              discover
            </div>
            <div class="code-name">.icon-discover
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-document-add"></span>
            <div class="name">
              document-add
            </div>
            <div class="code-name">.icon-document-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-files"></span>
            <div class="name">
              files
            </div>
            <div class="code-name">.icon-files
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-finished"></span>
            <div class="name">
              finished
            </div>
            <div class="code-name">.icon-finished
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-d-arrow-right"></span>
            <div class="name">
              d-arrow-right
            </div>
            <div class="code-name">.icon-d-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-add"></span>
            <div class="name">
              folder-add
            </div>
            <div class="code-name">.icon-folder-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-data-analysis"></span>
            <div class="name">
              data-analysis
            </div>
            <div class="code-name">.icon-data-analysis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-full-screen"></span>
            <div class="name">
              full-screen
            </div>
            <div class="code-name">.icon-full-screen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-delete"></span>
            <div class="name">
              folder-delete
            </div>
            <div class="code-name">.icon-folder-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goblet-full"></span>
            <div class="name">
              goblet-full
            </div>
            <div class="code-name">.icon-goblet-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-remove"></span>
            <div class="name">
              folder-remove
            </div>
            <div class="code-name">.icon-folder-remove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goblet-square"></span>
            <div class="name">
              goblet-square
            </div>
            <div class="code-name">.icon-goblet-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-date"></span>
            <div class="name">
              date
            </div>
            <div class="code-name">.icon-date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goblet"></span>
            <div class="name">
              goblet
            </div>
            <div class="code-name">.icon-goblet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-football"></span>
            <div class="name">
              football
            </div>
            <div class="code-name">.icon-football
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fork-spoon"></span>
            <div class="name">
              fork-spoon
            </div>
            <div class="code-name">.icon-fork-spoon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-house"></span>
            <div class="name">
              house
            </div>
            <div class="code-name">.icon-house
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goods"></span>
            <div class="name">
              goods
            </div>
            <div class="code-name">.icon-goods
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-food"></span>
            <div class="name">
              food
            </div>
            <div class="code-name">.icon-food
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guide"></span>
            <div class="name">
              guide
            </div>
            <div class="code-name">.icon-guide
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-document"></span>
            <div class="name">
              document
            </div>
            <div class="code-name">.icon-document
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-coordinate"></span>
            <div class="name">
              coordinate
            </div>
            <div class="code-name">.icon-coordinate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-checked"></span>
            <div class="name">
              folder-checked
            </div>
            <div class="code-name">.icon-folder-checked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudy"></span>
            <div class="name">
              cloudy
            </div>
            <div class="code-name">.icon-cloudy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eleme"></span>
            <div class="name">
              eleme
            </div>
            <div class="code-name">.icon-eleme
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ice-cream-round"></span>
            <div class="name">
              ice-cream-round
            </div>
            <div class="code-name">.icon-ice-cream-round
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hot-water"></span>
            <div class="name">
              hot-water
            </div>
            <div class="code-name">.icon-hot-water
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-female"></span>
            <div class="name">
              female
            </div>
            <div class="code-name">.icon-female
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-male"></span>
            <div class="name">
              male
            </div>
            <div class="code-name">.icon-male
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-light-rain"></span>
            <div class="name">
              light-rain
            </div>
            <div class="code-name">.icon-light-rain
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ice-cream"></span>
            <div class="name">
              ice-cream
            </div>
            <div class="code-name">.icon-ice-cream
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location-information"></span>
            <div class="name">
              location-information
            </div>
            <div class="code-name">.icon-location-information
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lollipop"></span>
            <div class="name">
              lollipop
            </div>
            <div class="code-name">.icon-lollipop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-document-delete"></span>
            <div class="name">
              document-delete
            </div>
            <div class="code-name">.icon-document-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heavy-rain"></span>
            <div class="name">
              heavy-rain
            </div>
            <div class="code-name">.icon-heavy-rain
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-film"></span>
            <div class="name">
              film
            </div>
            <div class="code-name">.icon-film
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-knife-fork"></span>
            <div class="name">
              knife-fork
            </div>
            <div class="code-name">.icon-knife-fork
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goblet-square-full"></span>
            <div class="name">
              goblet-square-full
            </div>
            <div class="code-name">.icon-goblet-square-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-grape"></span>
            <div class="name">
              grape
            </div>
            <div class="code-name">.icon-grape
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-key"></span>
            <div class="name">
              key
            </div>
            <div class="code-name">.icon-key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ice-drink"></span>
            <div class="name">
              ice-drink
            </div>
            <div class="code-name">.icon-ice-drink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-medal-1"></span>
            <div class="name">
              medal-1
            </div>
            <div class="code-name">.icon-medal-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-milk-tea"></span>
            <div class="name">
              milk-tea
            </div>
            <div class="code-name">.icon-milk-tea
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-microphone"></span>
            <div class="name">
              microphone
            </div>
            <div class="code-name">.icon-microphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dish"></span>
            <div class="name">
              dish
            </div>
            <div class="code-name">.icon-dish
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-circle-close"></span>
            <div class="name">
              circle-close
            </div>
            <div class="code-name">.icon-circle-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.icon-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more-outline"></span>
            <div class="name">
              more-outline
            </div>
            <div class="code-name">.icon-more-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-news"></span>
            <div class="name">
              news
            </div>
            <div class="code-name">.icon-news
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notebook-1"></span>
            <div class="name">
              notebook-1
            </div>
            <div class="code-name">.icon-notebook-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mobile"></span>
            <div class="name">
              mobile
            </div>
            <div class="code-name">.icon-mobile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon"></span>
            <div class="name">
              moon
            </div>
            <div class="code-name">.icon-moon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-odometer"></span>
            <div class="name">
              odometer
            </div>
            <div class="code-name">.icon-odometer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-first-aid-kit"></span>
            <div class="name">
              first-aid-kit
            </div>
            <div class="code-name">.icon-first-aid-kit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.icon-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-message-solid"></span>
            <div class="name">
              message-solid
            </div>
            <div class="code-name">.icon-message-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-headset"></span>
            <div class="name">
              headset
            </div>
            <div class="code-name">.icon-headset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-money"></span>
            <div class="name">
              money
            </div>
            <div class="code-name">.icon-money
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-map-location"></span>
            <div class="name">
              map-location
            </div>
            <div class="code-name">.icon-map-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paperclip"></span>
            <div class="name">
              paperclip
            </div>
            <div class="code-name">.icon-paperclip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-opened"></span>
            <div class="name">
              folder-opened
            </div>
            <div class="code-name">.icon-folder-opened
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pie-chart"></span>
            <div class="name">
              pie-chart
            </div>
            <div class="code-name">.icon-pie-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-no-smoking"></span>
            <div class="name">
              no-smoking
            </div>
            <div class="code-name">.icon-no-smoking
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-office-building"></span>
            <div class="name">
              office-building
            </div>
            <div class="code-name">.icon-office-building
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-postcard"></span>
            <div class="name">
              postcard
            </div>
            <div class="code-name">.icon-postcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-position"></span>
            <div class="name">
              position
            </div>
            <div class="code-name">.icon-position
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Ice-cream-square"></span>
            <div class="name">
              Ice-cream-square
            </div>
            <div class="code-name">.icon-Ice-cream-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-price-tag"></span>
            <div class="name">
              price-tag
            </div>
            <div class="code-name">.icon-price-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dessert"></span>
            <div class="name">
              dessert
            </div>
            <div class="code-name">.icon-dessert
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture-outline-round"></span>
            <div class="name">
              picture-outline-round
            </div>
            <div class="code-name">.icon-picture-outline-round
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-partly-cloudy"></span>
            <div class="name">
              partly-cloudy
            </div>
            <div class="code-name">.icon-partly-cloudy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reading"></span>
            <div class="name">
              reading
            </div>
            <div class="code-name">.icon-reading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location-outline"></span>
            <div class="name">
              location-outline
            </div>
            <div class="code-name">.icon-location-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-open"></span>
            <div class="name">
              open
            </div>
            <div class="code-name">.icon-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-phone-outline"></span>
            <div class="name">
              phone-outline
            </div>
            <div class="code-name">.icon-phone-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture-outline"></span>
            <div class="name">
              picture-outline
            </div>
            <div class="code-name">.icon-picture-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-place"></span>
            <div class="name">
              place
            </div>
            <div class="code-name">.icon-place
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ice-tea"></span>
            <div class="name">
              ice-tea
            </div>
            <div class="code-name">.icon-ice-tea
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-printer"></span>
            <div class="name">
              printer
            </div>
            <div class="code-name">.icon-printer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-cooperation"></span>
            <div class="name">
              s-cooperation
            </div>
            <div class="code-name">.icon-s-cooperation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-flag"></span>
            <div class="name">
              s-flag
            </div>
            <div class="code-name">.icon-s-flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lightning"></span>
            <div class="name">
              lightning
            </div>
            <div class="code-name">.icon-lightning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-magic-stick"></span>
            <div class="name">
              magic-stick
            </div>
            <div class="code-name">.icon-magic-stick
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moon-night"></span>
            <div class="name">
              moon-night
            </div>
            <div class="code-name">.icon-moon-night
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-check"></span>
            <div class="name">
              s-check
            </div>
            <div class="code-name">.icon-s-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refrigerator"></span>
            <div class="name">
              refrigerator
            </div>
            <div class="code-name">.icon-refrigerator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pear"></span>
            <div class="name">
              pear
            </div>
            <div class="code-name">.icon-pear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-home"></span>
            <div class="name">
              s-home
            </div>
            <div class="code-name">.icon-s-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mobile-phone"></span>
            <div class="name">
              mobile-phone
            </div>
            <div class="code-name">.icon-mobile-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-open"></span>
            <div class="name">
              s-open
            </div>
            <div class="code-name">.icon-s-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-potato-strips"></span>
            <div class="name">
              potato-strips
            </div>
            <div class="code-name">.icon-potato-strips
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-help"></span>
            <div class="name">
              s-help
            </div>
            <div class="code-name">.icon-s-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-monitor"></span>
            <div class="name">
              monitor
            </div>
            <div class="code-name">.icon-monitor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-custom"></span>
            <div class="name">
              s-custom
            </div>
            <div class="code-name">.icon-s-custom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-goods"></span>
            <div class="name">
              s-goods
            </div>
            <div class="code-name">.icon-s-goods
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rank"></span>
            <div class="name">
              rank
            </div>
            <div class="code-name">.icon-rank
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh-left"></span>
            <div class="name">
              refresh-left
            </div>
            <div class="code-name">.icon-refresh-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remove-outline"></span>
            <div class="name">
              remove-outline
            </div>
            <div class="code-name">.icon-remove-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-platform"></span>
            <div class="name">
              s-platform
            </div>
            <div class="code-name">.icon-s-platform
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mic"></span>
            <div class="name">
              mic
            </div>
            <div class="code-name">.icon-mic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-management"></span>
            <div class="name">
              s-management
            </div>
            <div class="code-name">.icon-s-management
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-platform-eleme"></span>
            <div class="name">
              platform-eleme
            </div>
            <div class="code-name">.icon-platform-eleme
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-fold"></span>
            <div class="name">
              s-fold
            </div>
            <div class="code-name">.icon-s-fold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notebook-2"></span>
            <div class="name">
              notebook-2
            </div>
            <div class="code-name">.icon-notebook-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-medal"></span>
            <div class="name">
              medal
            </div>
            <div class="code-name">.icon-medal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-data"></span>
            <div class="name">
              s-data
            </div>
            <div class="code-name">.icon-s-data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-promotion"></span>
            <div class="name">
              s-promotion
            </div>
            <div class="code-name">.icon-s-promotion
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-grid"></span>
            <div class="name">
              s-grid
            </div>
            <div class="code-name">.icon-s-grid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-receiving"></span>
            <div class="name">
              receiving
            </div>
            <div class="code-name">.icon-receiving
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-ticket"></span>
            <div class="name">
              s-ticket
            </div>
            <div class="code-name">.icon-s-ticket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-opportunity"></span>
            <div class="name">
              s-opportunity
            </div>
            <div class="code-name">.icon-s-opportunity
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh-right"></span>
            <div class="name">
              refresh-right
            </div>
            <div class="code-name">.icon-refresh-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-unfold"></span>
            <div class="name">
              s-unfold
            </div>
            <div class="code-name">.icon-s-unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-orange"></span>
            <div class="name">
              orange
            </div>
            <div class="code-name">.icon-orange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-tools"></span>
            <div class="name">
              s-tools
            </div>
            <div class="code-name">.icon-s-tools
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.icon-question
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mouse"></span>
            <div class="name">
              mouse
            </div>
            <div class="code-name">.icon-mouse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-shop"></span>
            <div class="name">
              s-shop
            </div>
            <div class="code-name">.icon-s-shop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-operation"></span>
            <div class="name">
              s-operation
            </div>
            <div class="code-name">.icon-s-operation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-scissors"></span>
            <div class="name">
              scissors
            </div>
            <div class="code-name">.icon-scissors
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-marketing"></span>
            <div class="name">
              s-marketing
            </div>
            <div class="code-name">.icon-s-marketing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-bag-1"></span>
            <div class="name">
              shopping-bag-1
            </div>
            <div class="code-name">.icon-shopping-bag-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sell"></span>
            <div class="name">
              sell
            </div>
            <div class="code-name">.icon-sell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set-up"></span>
            <div class="name">
              set-up
            </div>
            <div class="code-name">.icon-set-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-1"></span>
            <div class="name">
              shopping-cart-1
            </div>
            <div class="code-name">.icon-shopping-cart-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-claim"></span>
            <div class="name">
              s-claim
            </div>
            <div class="code-name">.icon-s-claim
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-school"></span>
            <div class="name">
              school
            </div>
            <div class="code-name">.icon-school
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ship"></span>
            <div class="name">
              ship
            </div>
            <div class="code-name">.icon-ship
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smoking"></span>
            <div class="name">
              smoking
            </div>
            <div class="code-name">.icon-smoking
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-2"></span>
            <div class="name">
              shopping-cart-2
            </div>
            <div class="code-name">.icon-shopping-cart-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-cart-full"></span>
            <div class="name">
              shopping-cart-full
            </div>
            <div class="code-name">.icon-shopping-cart-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sort-down"></span>
            <div class="name">
              sort-down
            </div>
            <div class="code-name">.icon-sort-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remove"></span>
            <div class="name">
              remove
            </div>
            <div class="code-name">.icon-remove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-soccer"></span>
            <div class="name">
              soccer
            </div>
            <div class="code-name">.icon-soccer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sort"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.icon-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-on"></span>
            <div class="name">
              star-on
            </div>
            <div class="code-name">.icon-star-on
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-present"></span>
            <div class="name">
              present
            </div>
            <div class="code-name">.icon-present
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-release"></span>
            <div class="name">
              s-release
            </div>
            <div class="code-name">.icon-s-release
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star-off"></span>
            <div class="name">
              star-off
            </div>
            <div class="code-name">.icon-star-off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suitcase"></span>
            <div class="name">
              suitcase
            </div>
            <div class="code-name">.icon-suitcase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-comment"></span>
            <div class="name">
              s-comment
            </div>
            <div class="code-name">.icon-s-comment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stopwatch"></span>
            <div class="name">
              stopwatch
            </div>
            <div class="code-name">.icon-stopwatch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-switch-button"></span>
            <div class="name">
              switch-button
            </div>
            <div class="code-name">.icon-switch-button
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suitcase-1"></span>
            <div class="name">
              suitcase-1
            </div>
            <div class="code-name">.icon-suitcase-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sunny"></span>
            <div class="name">
              sunny
            </div>
            <div class="code-name">.icon-sunny
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.icon-success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-order"></span>
            <div class="name">
              s-order
            </div>
            <div class="code-name">.icon-s-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sunrise"></span>
            <div class="name">
              sunrise
            </div>
            <div class="code-name">.icon-sunrise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shopping-bag-2"></span>
            <div class="name">
              shopping-bag-2
            </div>
            <div class="code-name">.icon-shopping-bag-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-s-finance"></span>
            <div class="name">
              s-finance
            </div>
            <div class="code-name">.icon-s-finance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tickets"></span>
            <div class="name">
              tickets
            </div>
            <div class="code-name">.icon-tickets
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tableware"></span>
            <div class="name">
              tableware
            </div>
            <div class="code-name">.icon-tableware
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-toilet-paper"></span>
            <div class="name">
              toilet-paper
            </div>
            <div class="code-name">.icon-toilet-paper
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-trophy-1"></span>
            <div class="name">
              trophy-1
            </div>
            <div class="code-name">.icon-trophy-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">.icon-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-truck"></span>
            <div class="name">
              truck
            </div>
            <div class="code-name">.icon-truck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-timer"></span>
            <div class="name">
              timer
            </div>
            <div class="code-name">.icon-timer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sold-out"></span>
            <div class="name">
              sold-out
            </div>
            <div class="code-name">.icon-sold-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-top-right"></span>
            <div class="name">
              top-right
            </div>
            <div class="code-name">.icon-top-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upload2"></span>
            <div class="name">
              upload2
            </div>
            <div class="code-name">.icon-upload2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-thumb"></span>
            <div class="name">
              thumb
            </div>
            <div class="code-name">.icon-thumb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-trophy"></span>
            <div class="name">
              trophy
            </div>
            <div class="code-name">.icon-trophy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wallet"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.icon-wallet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-table-lamp"></span>
            <div class="name">
              table-lamp
            </div>
            <div class="code-name">.icon-table-lamp
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-top-left"></span>
            <div class="name">
              top-left
            </div>
            <div class="code-name">.icon-top-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-service"></span>
            <div class="name">
              service
            </div>
            <div class="code-name">.icon-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aim"></span>
            <div class="name">
              aim
            </div>
            <div class="code-name">.icon-aim
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-play"></span>
            <div class="name">
              video-play
            </div>
            <div class="code-name">.icon-video-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-attract"></span>
            <div class="name">
              attract
            </div>
            <div class="code-name">.icon-attract
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-turn-off-microphone"></span>
            <div class="name">
              turn-off-microphone
            </div>
            <div class="code-name">.icon-turn-off-microphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bottom-left"></span>
            <div class="name">
              bottom-left
            </div>
            <div class="code-name">.icon-bottom-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-umbrella"></span>
            <div class="name">
              umbrella
            </div>
            <div class="code-name">.icon-umbrella
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alarm-clock"></span>
            <div class="name">
              alarm-clock
            </div>
            <div class="code-name">.icon-alarm-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sunset"></span>
            <div class="name">
              sunset
            </div>
            <div class="code-name">.icon-sunset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-apple"></span>
            <div class="name">
              apple
            </div>
            <div class="code-name">.icon-apple
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warning-outline"></span>
            <div class="name">
              warning-outline
            </div>
            <div class="code-name">.icon-warning-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.icon-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoom-in"></span>
            <div class="name">
              zoom-in
            </div>
            <div class="code-name">.icon-zoom-in
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera-solid"></span>
            <div class="name">
              camera-solid
            </div>
            <div class="code-name">.icon-camera-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-watch"></span>
            <div class="name">
              watch
            </div>
            <div class="code-name">.icon-watch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.icon-back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-camera"></span>
            <div class="name">
              video-camera
            </div>
            <div class="code-name">.icon-video-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sort-up"></span>
            <div class="name">
              sort-up
            </div>
            <div class="code-name">.icon-sort-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-brush"></span>
            <div class="name">
              brush
            </div>
            <div class="code-name">.icon-brush
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baseball"></span>
            <div class="name">
              baseball
            </div>
            <div class="code-name">.icon-baseball
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-pause"></span>
            <div class="name">
              video-pause
            </div>
            <div class="code-name">.icon-video-pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-watermelon"></span>
            <div class="name">
              watermelon
            </div>
            <div class="code-name">.icon-watermelon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangzhu"></span>
            <div class="name">
              bangzhu
            </div>
            <div class="code-name">.icon-bangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sugar"></span>
            <div class="name">
              sugar
            </div>
            <div class="code-name">.icon-sugar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-bottom"></span>
            <div class="name">
              caret-bottom
            </div>
            <div class="code-name">.icon-caret-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-turn-off"></span>
            <div class="name">
              turn-off
            </div>
            <div class="code-name">.icon-turn-off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-top"></span>
            <div class="name">
              caret-top
            </div>
            <div class="code-name">.icon-caret-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user-solid"></span>
            <div class="name">
              user-solid
            </div>
            <div class="code-name">.icon-user-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-view"></span>
            <div class="name">
              view
            </div>
            <div class="code-name">.icon-view
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bank-card"></span>
            <div class="name">
              bank-card
            </div>
            <div class="code-name">.icon-bank-card
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video-camera-solid"></span>
            <div class="name">
              video-camera-solid
            </div>
            <div class="code-name">.icon-video-camera-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat-line-square"></span>
            <div class="name">
              chat-line-square
            </div>
            <div class="code-name">.icon-chat-line-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wind-power"></span>
            <div class="name">
              wind-power
            </div>
            <div class="code-name">.icon-wind-power
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell"></span>
            <div class="name">
              bell
            </div>
            <div class="code-name">.icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-water-cup"></span>
            <div class="name">
              water-cup
            </div>
            <div class="code-name">.icon-water-cup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bicycle"></span>
            <div class="name">
              bicycle
            </div>
            <div class="code-name">.icon-bicycle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-watch-1"></span>
            <div class="name">
              watch-1
            </div>
            <div class="code-name">.icon-watch-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cherry"></span>
            <div class="name">
              cherry
            </div>
            <div class="code-name">.icon-cherry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zoom-out"></span>
            <div class="name">
              zoom-out
            </div>
            <div class="code-name">.icon-zoom-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-coffee"></span>
            <div class="name">
              coffee
            </div>
            <div class="code-name">.icon-coffee
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-takeaway-box"></span>
            <div class="name">
              takeaway-box
            </div>
            <div class="code-name">.icon-takeaway-box
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-coffee-cup"></span>
            <div class="name">
              coffee-cup
            </div>
            <div class="code-name">.icon-coffee-cup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sunrise-1"></span>
            <div class="name">
              sunrise-1
            </div>
            <div class="code-name">.icon-sunrise-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-circle-plus-outline"></span>
            <div class="name">
              circle-plus-outline
            </div>
            <div class="code-name">.icon-circle-plus-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bottom-right"></span>
            <div class="name">
              bottom-right
            </div>
            <div class="code-name">.icon-bottom-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-c-scale-to-original"></span>
            <div class="name">
              c-scale-to-original
            </div>
            <div class="code-name">.icon-c-scale-to-original
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-collection-tag"></span>
            <div class="name">
              collection-tag
            </div>
            <div class="code-name">.icon-collection-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-circle-check"></span>
            <div class="name">
              circle-check
            </div>
            <div class="code-name">.icon-circle-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bottom"></span>
            <div class="name">
              bottom
            </div>
            <div class="code-name">.icon-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-data-line"></span>
            <div class="name">
              data-line
            </div>
            <div class="code-name">.icon-data-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-d-caret"></span>
            <div class="name">
              d-caret
            </div>
            <div class="code-name">.icon-d-caret
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudy-and-sunny"></span>
            <div class="name">
              cloudy-and-sunny
            </div>
            <div class="code-name">.icon-cloudy-and-sunny
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-discount"></span>
            <div class="name">
              discount
            </div>
            <div class="code-name">.icon-discount
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cpu"></span>
            <div class="name">
              cpu
            </div>
            <div class="code-name">.icon-cpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-crop"></span>
            <div class="name">
              crop
            </div>
            <div class="code-name">.icon-crop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chat-round"></span>
            <div class="name">
              chat-round
            </div>
            <div class="code-name">.icon-chat-round
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chicken"></span>
            <div class="name">
              chicken
            </div>
            <div class="code-name">.icon-chicken
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-burger"></span>
            <div class="name">
              burger
            </div>
            <div class="code-name">.icon-burger
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat-dot-round"></use>
                </svg>
                <div class="name">chat-dot-round</div>
                <div class="code-name">#icon-chat-dot-round</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-connection"></use>
                </svg>
                <div class="name">connection</div>
                <div class="code-name">#icon-connection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-document-copy"></use>
                </svg>
                <div class="name">document-copy</div>
                <div class="code-name">#icon-document-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-basketball"></use>
                </svg>
                <div class="name">basketball</div>
                <div class="code-name">#icon-basketball</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-box"></use>
                </svg>
                <div class="name">box</div>
                <div class="code-name">#icon-box</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-left"></use>
                </svg>
                <div class="name">caret-left</div>
                <div class="code-name">#icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dish-1"></use>
                </svg>
                <div class="name">dish-1</div>
                <div class="code-name">#icon-dish-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat-dot-square"></use>
                </svg>
                <div class="name">chat-dot-square</div>
                <div class="code-name">#icon-chat-dot-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-notification"></use>
                </svg>
                <div class="name">close-notification</div>
                <div class="code-name">#icon-close-notification</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cold-drink"></use>
                </svg>
                <div class="name">cold-drink</div>
                <div class="code-name">#icon-cold-drink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-data-board"></use>
                </svg>
                <div class="name">data-board</div>
                <div class="code-name">#icon-data-board</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-coin"></use>
                </svg>
                <div class="name">coin</div>
                <div class="code-name">#icon-coin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-circle-plus"></use>
                </svg>
                <div class="name">circle-plus</div>
                <div class="code-name">#icon-circle-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat-square"></use>
                </svg>
                <div class="name">chat-square</div>
                <div class="code-name">#icon-chat-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-solid"></use>
                </svg>
                <div class="name">delete-solid</div>
                <div class="code-name">#icon-delete-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-location"></use>
                </svg>
                <div class="name">add-location</div>
                <div class="code-name">#icon-add-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collection"></use>
                </svg>
                <div class="name">collection</div>
                <div class="code-name">#icon-collection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat-line-round"></use>
                </svg>
                <div class="name">chat-line-round</div>
                <div class="code-name">#icon-chat-line-round</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-right"></use>
                </svg>
                <div class="name">caret-right</div>
                <div class="code-name">#icon-caret-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-location"></use>
                </svg>
                <div class="name">delete-location</div>
                <div class="code-name">#icon-delete-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy-document"></use>
                </svg>
                <div class="name">copy-document</div>
                <div class="code-name">#icon-copy-document</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-document-remove"></use>
                </svg>
                <div class="name">document-remove</div>
                <div class="code-name">#icon-document-remove</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-d-arrow-left"></use>
                </svg>
                <div class="name">d-arrow-left</div>
                <div class="code-name">#icon-d-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-outline"></use>
                </svg>
                <div class="name">edit-outline</div>
                <div class="code-name">#icon-edit-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-document-checked"></use>
                </svg>
                <div class="name">document-checked</div>
                <div class="code-name">#icon-document-checked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-discover"></use>
                </svg>
                <div class="name">discover</div>
                <div class="code-name">#icon-discover</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-document-add"></use>
                </svg>
                <div class="name">document-add</div>
                <div class="code-name">#icon-document-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-files"></use>
                </svg>
                <div class="name">files</div>
                <div class="code-name">#icon-files</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-finished"></use>
                </svg>
                <div class="name">finished</div>
                <div class="code-name">#icon-finished</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-d-arrow-right"></use>
                </svg>
                <div class="name">d-arrow-right</div>
                <div class="code-name">#icon-d-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-add"></use>
                </svg>
                <div class="name">folder-add</div>
                <div class="code-name">#icon-folder-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-data-analysis"></use>
                </svg>
                <div class="name">data-analysis</div>
                <div class="code-name">#icon-data-analysis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-full-screen"></use>
                </svg>
                <div class="name">full-screen</div>
                <div class="code-name">#icon-full-screen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-delete"></use>
                </svg>
                <div class="name">folder-delete</div>
                <div class="code-name">#icon-folder-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goblet-full"></use>
                </svg>
                <div class="name">goblet-full</div>
                <div class="code-name">#icon-goblet-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-remove"></use>
                </svg>
                <div class="name">folder-remove</div>
                <div class="code-name">#icon-folder-remove</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goblet-square"></use>
                </svg>
                <div class="name">goblet-square</div>
                <div class="code-name">#icon-goblet-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-date"></use>
                </svg>
                <div class="name">date</div>
                <div class="code-name">#icon-date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goblet"></use>
                </svg>
                <div class="name">goblet</div>
                <div class="code-name">#icon-goblet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-football"></use>
                </svg>
                <div class="name">football</div>
                <div class="code-name">#icon-football</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fork-spoon"></use>
                </svg>
                <div class="name">fork-spoon</div>
                <div class="code-name">#icon-fork-spoon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-house"></use>
                </svg>
                <div class="name">house</div>
                <div class="code-name">#icon-house</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goods"></use>
                </svg>
                <div class="name">goods</div>
                <div class="code-name">#icon-goods</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-food"></use>
                </svg>
                <div class="name">food</div>
                <div class="code-name">#icon-food</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guide"></use>
                </svg>
                <div class="name">guide</div>
                <div class="code-name">#icon-guide</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-document"></use>
                </svg>
                <div class="name">document</div>
                <div class="code-name">#icon-document</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-coordinate"></use>
                </svg>
                <div class="name">coordinate</div>
                <div class="code-name">#icon-coordinate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-checked"></use>
                </svg>
                <div class="name">folder-checked</div>
                <div class="code-name">#icon-folder-checked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudy"></use>
                </svg>
                <div class="name">cloudy</div>
                <div class="code-name">#icon-cloudy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eleme"></use>
                </svg>
                <div class="name">eleme</div>
                <div class="code-name">#icon-eleme</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ice-cream-round"></use>
                </svg>
                <div class="name">ice-cream-round</div>
                <div class="code-name">#icon-ice-cream-round</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hot-water"></use>
                </svg>
                <div class="name">hot-water</div>
                <div class="code-name">#icon-hot-water</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-female"></use>
                </svg>
                <div class="name">female</div>
                <div class="code-name">#icon-female</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-male"></use>
                </svg>
                <div class="name">male</div>
                <div class="code-name">#icon-male</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-light-rain"></use>
                </svg>
                <div class="name">light-rain</div>
                <div class="code-name">#icon-light-rain</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ice-cream"></use>
                </svg>
                <div class="name">ice-cream</div>
                <div class="code-name">#icon-ice-cream</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location-information"></use>
                </svg>
                <div class="name">location-information</div>
                <div class="code-name">#icon-location-information</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lollipop"></use>
                </svg>
                <div class="name">lollipop</div>
                <div class="code-name">#icon-lollipop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-document-delete"></use>
                </svg>
                <div class="name">document-delete</div>
                <div class="code-name">#icon-document-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heavy-rain"></use>
                </svg>
                <div class="name">heavy-rain</div>
                <div class="code-name">#icon-heavy-rain</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-film"></use>
                </svg>
                <div class="name">film</div>
                <div class="code-name">#icon-film</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-knife-fork"></use>
                </svg>
                <div class="name">knife-fork</div>
                <div class="code-name">#icon-knife-fork</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goblet-square-full"></use>
                </svg>
                <div class="name">goblet-square-full</div>
                <div class="code-name">#icon-goblet-square-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-grape"></use>
                </svg>
                <div class="name">grape</div>
                <div class="code-name">#icon-grape</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-key"></use>
                </svg>
                <div class="name">key</div>
                <div class="code-name">#icon-key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ice-drink"></use>
                </svg>
                <div class="name">ice-drink</div>
                <div class="code-name">#icon-ice-drink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-medal-1"></use>
                </svg>
                <div class="name">medal-1</div>
                <div class="code-name">#icon-medal-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-milk-tea"></use>
                </svg>
                <div class="name">milk-tea</div>
                <div class="code-name">#icon-milk-tea</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#icon-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-microphone"></use>
                </svg>
                <div class="name">microphone</div>
                <div class="code-name">#icon-microphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dish"></use>
                </svg>
                <div class="name">dish</div>
                <div class="code-name">#icon-dish</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-circle-close"></use>
                </svg>
                <div class="name">circle-close</div>
                <div class="code-name">#icon-circle-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#icon-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more-outline"></use>
                </svg>
                <div class="name">more-outline</div>
                <div class="code-name">#icon-more-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-news"></use>
                </svg>
                <div class="name">news</div>
                <div class="code-name">#icon-news</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notebook-1"></use>
                </svg>
                <div class="name">notebook-1</div>
                <div class="code-name">#icon-notebook-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobile"></use>
                </svg>
                <div class="name">mobile</div>
                <div class="code-name">#icon-mobile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#icon-loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon"></use>
                </svg>
                <div class="name">moon</div>
                <div class="code-name">#icon-moon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-odometer"></use>
                </svg>
                <div class="name">odometer</div>
                <div class="code-name">#icon-odometer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-first-aid-kit"></use>
                </svg>
                <div class="name">first-aid-kit</div>
                <div class="code-name">#icon-first-aid-kit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus"></use>
                </svg>
                <div class="name">minus</div>
                <div class="code-name">#icon-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-message-solid"></use>
                </svg>
                <div class="name">message-solid</div>
                <div class="code-name">#icon-message-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-headset"></use>
                </svg>
                <div class="name">headset</div>
                <div class="code-name">#icon-headset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-money"></use>
                </svg>
                <div class="name">money</div>
                <div class="code-name">#icon-money</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-map-location"></use>
                </svg>
                <div class="name">map-location</div>
                <div class="code-name">#icon-map-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paperclip"></use>
                </svg>
                <div class="name">paperclip</div>
                <div class="code-name">#icon-paperclip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-opened"></use>
                </svg>
                <div class="name">folder-opened</div>
                <div class="code-name">#icon-folder-opened</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pie-chart"></use>
                </svg>
                <div class="name">pie-chart</div>
                <div class="code-name">#icon-pie-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-no-smoking"></use>
                </svg>
                <div class="name">no-smoking</div>
                <div class="code-name">#icon-no-smoking</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-office-building"></use>
                </svg>
                <div class="name">office-building</div>
                <div class="code-name">#icon-office-building</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-postcard"></use>
                </svg>
                <div class="name">postcard</div>
                <div class="code-name">#icon-postcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-position"></use>
                </svg>
                <div class="name">position</div>
                <div class="code-name">#icon-position</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Ice-cream-square"></use>
                </svg>
                <div class="name">Ice-cream-square</div>
                <div class="code-name">#icon-Ice-cream-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-price-tag"></use>
                </svg>
                <div class="name">price-tag</div>
                <div class="code-name">#icon-price-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dessert"></use>
                </svg>
                <div class="name">dessert</div>
                <div class="code-name">#icon-dessert</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture-outline-round"></use>
                </svg>
                <div class="name">picture-outline-round</div>
                <div class="code-name">#icon-picture-outline-round</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-partly-cloudy"></use>
                </svg>
                <div class="name">partly-cloudy</div>
                <div class="code-name">#icon-partly-cloudy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reading"></use>
                </svg>
                <div class="name">reading</div>
                <div class="code-name">#icon-reading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location-outline"></use>
                </svg>
                <div class="name">location-outline</div>
                <div class="code-name">#icon-location-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-open"></use>
                </svg>
                <div class="name">open</div>
                <div class="code-name">#icon-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone-outline"></use>
                </svg>
                <div class="name">phone-outline</div>
                <div class="code-name">#icon-phone-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture-outline"></use>
                </svg>
                <div class="name">picture-outline</div>
                <div class="code-name">#icon-picture-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-place"></use>
                </svg>
                <div class="name">place</div>
                <div class="code-name">#icon-place</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ice-tea"></use>
                </svg>
                <div class="name">ice-tea</div>
                <div class="code-name">#icon-ice-tea</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-printer"></use>
                </svg>
                <div class="name">printer</div>
                <div class="code-name">#icon-printer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-cooperation"></use>
                </svg>
                <div class="name">s-cooperation</div>
                <div class="code-name">#icon-s-cooperation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-flag"></use>
                </svg>
                <div class="name">s-flag</div>
                <div class="code-name">#icon-s-flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lightning"></use>
                </svg>
                <div class="name">lightning</div>
                <div class="code-name">#icon-lightning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-magic-stick"></use>
                </svg>
                <div class="name">magic-stick</div>
                <div class="code-name">#icon-magic-stick</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moon-night"></use>
                </svg>
                <div class="name">moon-night</div>
                <div class="code-name">#icon-moon-night</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-check"></use>
                </svg>
                <div class="name">s-check</div>
                <div class="code-name">#icon-s-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refrigerator"></use>
                </svg>
                <div class="name">refrigerator</div>
                <div class="code-name">#icon-refrigerator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pear"></use>
                </svg>
                <div class="name">pear</div>
                <div class="code-name">#icon-pear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-home"></use>
                </svg>
                <div class="name">s-home</div>
                <div class="code-name">#icon-s-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobile-phone"></use>
                </svg>
                <div class="name">mobile-phone</div>
                <div class="code-name">#icon-mobile-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-open"></use>
                </svg>
                <div class="name">s-open</div>
                <div class="code-name">#icon-s-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-potato-strips"></use>
                </svg>
                <div class="name">potato-strips</div>
                <div class="code-name">#icon-potato-strips</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-help"></use>
                </svg>
                <div class="name">s-help</div>
                <div class="code-name">#icon-s-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-monitor"></use>
                </svg>
                <div class="name">monitor</div>
                <div class="code-name">#icon-monitor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-custom"></use>
                </svg>
                <div class="name">s-custom</div>
                <div class="code-name">#icon-s-custom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-goods"></use>
                </svg>
                <div class="name">s-goods</div>
                <div class="code-name">#icon-s-goods</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rank"></use>
                </svg>
                <div class="name">rank</div>
                <div class="code-name">#icon-rank</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-left"></use>
                </svg>
                <div class="name">refresh-left</div>
                <div class="code-name">#icon-refresh-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remove-outline"></use>
                </svg>
                <div class="name">remove-outline</div>
                <div class="code-name">#icon-remove-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-platform"></use>
                </svg>
                <div class="name">s-platform</div>
                <div class="code-name">#icon-s-platform</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mic"></use>
                </svg>
                <div class="name">mic</div>
                <div class="code-name">#icon-mic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-management"></use>
                </svg>
                <div class="name">s-management</div>
                <div class="code-name">#icon-s-management</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-platform-eleme"></use>
                </svg>
                <div class="name">platform-eleme</div>
                <div class="code-name">#icon-platform-eleme</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-fold"></use>
                </svg>
                <div class="name">s-fold</div>
                <div class="code-name">#icon-s-fold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notebook-2"></use>
                </svg>
                <div class="name">notebook-2</div>
                <div class="code-name">#icon-notebook-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-medal"></use>
                </svg>
                <div class="name">medal</div>
                <div class="code-name">#icon-medal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-data"></use>
                </svg>
                <div class="name">s-data</div>
                <div class="code-name">#icon-s-data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-promotion"></use>
                </svg>
                <div class="name">s-promotion</div>
                <div class="code-name">#icon-s-promotion</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-grid"></use>
                </svg>
                <div class="name">s-grid</div>
                <div class="code-name">#icon-s-grid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-receiving"></use>
                </svg>
                <div class="name">receiving</div>
                <div class="code-name">#icon-receiving</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-ticket"></use>
                </svg>
                <div class="name">s-ticket</div>
                <div class="code-name">#icon-s-ticket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-opportunity"></use>
                </svg>
                <div class="name">s-opportunity</div>
                <div class="code-name">#icon-s-opportunity</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh-right"></use>
                </svg>
                <div class="name">refresh-right</div>
                <div class="code-name">#icon-refresh-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-unfold"></use>
                </svg>
                <div class="name">s-unfold</div>
                <div class="code-name">#icon-s-unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-orange"></use>
                </svg>
                <div class="name">orange</div>
                <div class="code-name">#icon-orange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-tools"></use>
                </svg>
                <div class="name">s-tools</div>
                <div class="code-name">#icon-s-tools</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question"></use>
                </svg>
                <div class="name">question</div>
                <div class="code-name">#icon-question</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mouse"></use>
                </svg>
                <div class="name">mouse</div>
                <div class="code-name">#icon-mouse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-shop"></use>
                </svg>
                <div class="name">s-shop</div>
                <div class="code-name">#icon-s-shop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-operation"></use>
                </svg>
                <div class="name">s-operation</div>
                <div class="code-name">#icon-s-operation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scissors"></use>
                </svg>
                <div class="name">scissors</div>
                <div class="code-name">#icon-scissors</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-marketing"></use>
                </svg>
                <div class="name">s-marketing</div>
                <div class="code-name">#icon-s-marketing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-bag-1"></use>
                </svg>
                <div class="name">shopping-bag-1</div>
                <div class="code-name">#icon-shopping-bag-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sell"></use>
                </svg>
                <div class="name">sell</div>
                <div class="code-name">#icon-sell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set-up"></use>
                </svg>
                <div class="name">set-up</div>
                <div class="code-name">#icon-set-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-1"></use>
                </svg>
                <div class="name">shopping-cart-1</div>
                <div class="code-name">#icon-shopping-cart-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-claim"></use>
                </svg>
                <div class="name">s-claim</div>
                <div class="code-name">#icon-s-claim</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-school"></use>
                </svg>
                <div class="name">school</div>
                <div class="code-name">#icon-school</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ship"></use>
                </svg>
                <div class="name">ship</div>
                <div class="code-name">#icon-ship</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smoking"></use>
                </svg>
                <div class="name">smoking</div>
                <div class="code-name">#icon-smoking</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-2"></use>
                </svg>
                <div class="name">shopping-cart-2</div>
                <div class="code-name">#icon-shopping-cart-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart-full"></use>
                </svg>
                <div class="name">shopping-cart-full</div>
                <div class="code-name">#icon-shopping-cart-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sort-down"></use>
                </svg>
                <div class="name">sort-down</div>
                <div class="code-name">#icon-sort-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#icon-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remove"></use>
                </svg>
                <div class="name">remove</div>
                <div class="code-name">#icon-remove</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-soccer"></use>
                </svg>
                <div class="name">soccer</div>
                <div class="code-name">#icon-soccer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sort"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#icon-sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-on"></use>
                </svg>
                <div class="name">star-on</div>
                <div class="code-name">#icon-star-on</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-present"></use>
                </svg>
                <div class="name">present</div>
                <div class="code-name">#icon-present</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-release"></use>
                </svg>
                <div class="name">s-release</div>
                <div class="code-name">#icon-s-release</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-off"></use>
                </svg>
                <div class="name">star-off</div>
                <div class="code-name">#icon-star-off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suitcase"></use>
                </svg>
                <div class="name">suitcase</div>
                <div class="code-name">#icon-suitcase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-comment"></use>
                </svg>
                <div class="name">s-comment</div>
                <div class="code-name">#icon-s-comment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stopwatch"></use>
                </svg>
                <div class="name">stopwatch</div>
                <div class="code-name">#icon-stopwatch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-switch-button"></use>
                </svg>
                <div class="name">switch-button</div>
                <div class="code-name">#icon-switch-button</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suitcase-1"></use>
                </svg>
                <div class="name">suitcase-1</div>
                <div class="code-name">#icon-suitcase-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sunny"></use>
                </svg>
                <div class="name">sunny</div>
                <div class="code-name">#icon-sunny</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#icon-success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-order"></use>
                </svg>
                <div class="name">s-order</div>
                <div class="code-name">#icon-s-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sunrise"></use>
                </svg>
                <div class="name">sunrise</div>
                <div class="code-name">#icon-sunrise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-bag-2"></use>
                </svg>
                <div class="name">shopping-bag-2</div>
                <div class="code-name">#icon-shopping-bag-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-s-finance"></use>
                </svg>
                <div class="name">s-finance</div>
                <div class="code-name">#icon-s-finance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tickets"></use>
                </svg>
                <div class="name">tickets</div>
                <div class="code-name">#icon-tickets</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tableware"></use>
                </svg>
                <div class="name">tableware</div>
                <div class="code-name">#icon-tableware</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-toilet-paper"></use>
                </svg>
                <div class="name">toilet-paper</div>
                <div class="code-name">#icon-toilet-paper</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trophy-1"></use>
                </svg>
                <div class="name">trophy-1</div>
                <div class="code-name">#icon-trophy-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-top"></use>
                </svg>
                <div class="name">top</div>
                <div class="code-name">#icon-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-truck"></use>
                </svg>
                <div class="name">truck</div>
                <div class="code-name">#icon-truck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-timer"></use>
                </svg>
                <div class="name">timer</div>
                <div class="code-name">#icon-timer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sold-out"></use>
                </svg>
                <div class="name">sold-out</div>
                <div class="code-name">#icon-sold-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-top-right"></use>
                </svg>
                <div class="name">top-right</div>
                <div class="code-name">#icon-top-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload2"></use>
                </svg>
                <div class="name">upload2</div>
                <div class="code-name">#icon-upload2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-thumb"></use>
                </svg>
                <div class="name">thumb</div>
                <div class="code-name">#icon-thumb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-trophy"></use>
                </svg>
                <div class="name">trophy</div>
                <div class="code-name">#icon-trophy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wallet"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#icon-wallet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-table-lamp"></use>
                </svg>
                <div class="name">table-lamp</div>
                <div class="code-name">#icon-table-lamp</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-top-left"></use>
                </svg>
                <div class="name">top-left</div>
                <div class="code-name">#icon-top-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-service"></use>
                </svg>
                <div class="name">service</div>
                <div class="code-name">#icon-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aim"></use>
                </svg>
                <div class="name">aim</div>
                <div class="code-name">#icon-aim</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-play"></use>
                </svg>
                <div class="name">video-play</div>
                <div class="code-name">#icon-video-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attract"></use>
                </svg>
                <div class="name">attract</div>
                <div class="code-name">#icon-attract</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-turn-off-microphone"></use>
                </svg>
                <div class="name">turn-off-microphone</div>
                <div class="code-name">#icon-turn-off-microphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bottom-left"></use>
                </svg>
                <div class="name">bottom-left</div>
                <div class="code-name">#icon-bottom-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-umbrella"></use>
                </svg>
                <div class="name">umbrella</div>
                <div class="code-name">#icon-umbrella</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alarm-clock"></use>
                </svg>
                <div class="name">alarm-clock</div>
                <div class="code-name">#icon-alarm-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sunset"></use>
                </svg>
                <div class="name">sunset</div>
                <div class="code-name">#icon-sunset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-apple"></use>
                </svg>
                <div class="name">apple</div>
                <div class="code-name">#icon-apple</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning-outline"></use>
                </svg>
                <div class="name">warning-outline</div>
                <div class="code-name">#icon-warning-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#icon-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-in"></use>
                </svg>
                <div class="name">zoom-in</div>
                <div class="code-name">#icon-zoom-in</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera-solid"></use>
                </svg>
                <div class="name">camera-solid</div>
                <div class="code-name">#icon-camera-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-watch"></use>
                </svg>
                <div class="name">watch</div>
                <div class="code-name">#icon-watch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#icon-back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-camera"></use>
                </svg>
                <div class="name">video-camera</div>
                <div class="code-name">#icon-video-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sort-up"></use>
                </svg>
                <div class="name">sort-up</div>
                <div class="code-name">#icon-sort-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-brush"></use>
                </svg>
                <div class="name">brush</div>
                <div class="code-name">#icon-brush</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baseball"></use>
                </svg>
                <div class="name">baseball</div>
                <div class="code-name">#icon-baseball</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-pause"></use>
                </svg>
                <div class="name">video-pause</div>
                <div class="code-name">#icon-video-pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-watermelon"></use>
                </svg>
                <div class="name">watermelon</div>
                <div class="code-name">#icon-watermelon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangzhu"></use>
                </svg>
                <div class="name">bangzhu</div>
                <div class="code-name">#icon-bangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sugar"></use>
                </svg>
                <div class="name">sugar</div>
                <div class="code-name">#icon-sugar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-bottom"></use>
                </svg>
                <div class="name">caret-bottom</div>
                <div class="code-name">#icon-caret-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-turn-off"></use>
                </svg>
                <div class="name">turn-off</div>
                <div class="code-name">#icon-turn-off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-top"></use>
                </svg>
                <div class="name">caret-top</div>
                <div class="code-name">#icon-caret-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user-solid"></use>
                </svg>
                <div class="name">user-solid</div>
                <div class="code-name">#icon-user-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#icon-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-view"></use>
                </svg>
                <div class="name">view</div>
                <div class="code-name">#icon-view</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bank-card"></use>
                </svg>
                <div class="name">bank-card</div>
                <div class="code-name">#icon-bank-card</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video-camera-solid"></use>
                </svg>
                <div class="name">video-camera-solid</div>
                <div class="code-name">#icon-video-camera-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat-line-square"></use>
                </svg>
                <div class="name">chat-line-square</div>
                <div class="code-name">#icon-chat-line-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wind-power"></use>
                </svg>
                <div class="name">wind-power</div>
                <div class="code-name">#icon-wind-power</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell"></use>
                </svg>
                <div class="name">bell</div>
                <div class="code-name">#icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-water-cup"></use>
                </svg>
                <div class="name">water-cup</div>
                <div class="code-name">#icon-water-cup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bicycle"></use>
                </svg>
                <div class="name">bicycle</div>
                <div class="code-name">#icon-bicycle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-watch-1"></use>
                </svg>
                <div class="name">watch-1</div>
                <div class="code-name">#icon-watch-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cherry"></use>
                </svg>
                <div class="name">cherry</div>
                <div class="code-name">#icon-cherry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zoom-out"></use>
                </svg>
                <div class="name">zoom-out</div>
                <div class="code-name">#icon-zoom-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-coffee"></use>
                </svg>
                <div class="name">coffee</div>
                <div class="code-name">#icon-coffee</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-takeaway-box"></use>
                </svg>
                <div class="name">takeaway-box</div>
                <div class="code-name">#icon-takeaway-box</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-coffee-cup"></use>
                </svg>
                <div class="name">coffee-cup</div>
                <div class="code-name">#icon-coffee-cup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sunrise-1"></use>
                </svg>
                <div class="name">sunrise-1</div>
                <div class="code-name">#icon-sunrise-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-circle-plus-outline"></use>
                </svg>
                <div class="name">circle-plus-outline</div>
                <div class="code-name">#icon-circle-plus-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bottom-right"></use>
                </svg>
                <div class="name">bottom-right</div>
                <div class="code-name">#icon-bottom-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-c-scale-to-original"></use>
                </svg>
                <div class="name">c-scale-to-original</div>
                <div class="code-name">#icon-c-scale-to-original</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-collection-tag"></use>
                </svg>
                <div class="name">collection-tag</div>
                <div class="code-name">#icon-collection-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-circle-check"></use>
                </svg>
                <div class="name">circle-check</div>
                <div class="code-name">#icon-circle-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bottom"></use>
                </svg>
                <div class="name">bottom</div>
                <div class="code-name">#icon-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-data-line"></use>
                </svg>
                <div class="name">data-line</div>
                <div class="code-name">#icon-data-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-d-caret"></use>
                </svg>
                <div class="name">d-caret</div>
                <div class="code-name">#icon-d-caret</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudy-and-sunny"></use>
                </svg>
                <div class="name">cloudy-and-sunny</div>
                <div class="code-name">#icon-cloudy-and-sunny</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-discount"></use>
                </svg>
                <div class="name">discount</div>
                <div class="code-name">#icon-discount</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cpu"></use>
                </svg>
                <div class="name">cpu</div>
                <div class="code-name">#icon-cpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-crop"></use>
                </svg>
                <div class="name">crop</div>
                <div class="code-name">#icon-crop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chat-round"></use>
                </svg>
                <div class="name">chat-round</div>
                <div class="code-name">#icon-chat-round</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chicken"></use>
                </svg>
                <div class="name">chicken</div>
                <div class="code-name">#icon-chicken</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-burger"></use>
                </svg>
                <div class="name">burger</div>
                <div class="code-name">#icon-burger</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
